<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-21 14:36:35
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-04 17:10:14
-->
<template>
  <div class="p-4">
    <!-- 进度条 -->
    <OrderProgress :record="record" />
    <!-- 订单信息 -->
    <OrderInfo class="mt-2" :record="record" />
    <!-- 商品信息 -->
    <GoodsInfo class="mt-2" :record="record" />
    <!-- 物流信息 -->
    <DeliveryInfo class="mt-2" :record="record" />
  </div>
</template>

<script setup lang="ts">
  import { OrderDetailParam } from '/@/api/order/model/orderModel';
  import { useRoute } from 'vue-router';
  import { useGo } from '/@/hooks/web/usePage';
  import { orderDetail } from '/@/api/order';
  import { onMounted, ref } from 'vue';
  import { OrderRecordModel } from '../model';
  import { OrderProgress } from './components/OrderProgress';
  import { OrderInfo } from './components/OrderInfo';
  import { GoodsInfo } from './components/GoodsInfo';
  import { DeliveryInfo } from './components/DeliveryInfo';
  const go = useGo();
  const {
    params: { id },
  } = useRoute();
  const record = ref<OrderRecordModel | any>({});

  if (!id) go('/order');
  // 请求订单详情的数据
  let query = { orderId: id } as OrderDetailParam;
  async function getDetail() {
    const data = await orderDetail(query);
    record.value = data.detail;
  }
  // 生命周期函数
  onMounted(() => {
    getDetail();
  });
</script>

<style lang="less" scoped>
  .mt-2 {
    margin-top: 20px;
  }
</style>
